<template>
    <div>
        <div class="login-logo">
            <router-link to="/"><i><img src="@/assets/images/logo.png" alt=""></i></router-link>
            
        </div>
        <div class="login-main">
            <div class="wid-1200">
                <div class="login-content">
                    <ul>
                        <li :class="{active: isActive == 0}" @click="isActive = 0">账号密码登录</li>
                        <li :class="{active: isActive == 1}" @click="isActive = 1">验证码登录</li>
                    </ul>
                    <form action="" v-show="isActive == 0">
                        <div class="label-box">
                            <input type="text" v-model="account" placeholder="账号">
                        </div>
                        <div class="label-box">
                            <input type="password" v-model="password" placeholder="密码">
                        </div>
                        <div class="checkbox">
                            <Checkbox  v-model="isAutoLogin">  30天自动登录</Checkbox>
                        </div>
                        <button class="login-button">登录</button>
                        <div class="link-box">
                            <router-link to="/registered">新用户注册</router-link>
                            <router-link to="/recoverPassword">忘记密码</router-link>
                        </div>
                    </form>
                    <form action="" v-show="isActive == 1">
                        <div class="label-box">
                            <input type="tel" v-model="tel" placeholder="手机号">
                        </div>
                        <div class="label-box">
                            <input type="text" v-model="code" placeholder="验证码">
                        </div>
                        <button class="login-button">登录</button>
                        <div class="link-box">
                            <router-link to="/registered">新用户注册</router-link>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <footer>
            copyright 温榆河湿地公园2019-2020c
        </footer>
    </div>
</template>

<script>
    //iview
    import { Checkbox } from "view-design";
    export default {
        name: "index",
        components: {
            [Checkbox.name]:Checkbox
        },
        data(){
            return{
                isActive:0,
                account:'',//账号
                password:'',//密码
                isAutoLogin:false,//自动登录
                tel:'',//手机号
                code:'',//验证码
            }
        }
    }
</script>

<style scoped lang="scss">
    @import "@/assets/css/basis";
    .login-logo {
        display: flex;
        align-items: center;
        width: 1200px;
        height: 70px;
        margin: 0 auto;
        >a{
            display: block;
        }
        img{
            width: 126px;
        }
    }
    .login-main {
        display: flex;
        align-items: center;
        width: 100%;
        height: 500px;
        background: url("../../assets/temporary/login-bg.png") center center no-repeat;
        .login-content {
            width:358px;
            height:438px;
            padding:28px;
            background:rgba(255,255,255,1);
            float: right;
            ul{
                display: flex;
                font-size: 16px;
                color: #333;
                text-align: center;
                border-bottom: 1px solid #e5e5e5;
                li{
                    position: relative;
                    flex: 1;
                    padding:12px 0;
                    cursor: pointer;
                    &.active{
                        color: #E5B87F;
                        font-weight: bold;
                        &:before {
                            content: '';
                            position: absolute;
                            bottom: 0;
                            left: 50%;
                            width:86px;
                            height:2px;
                            background: rgba(233,176,78,1);
                            transform: translateX(-50%);
                        }
                    }

                }
            }
        }
        form{
            padding: 30px 0 ;
        }
        .login-button{
            width:100%;
            height:40px;
            margin: 36px auto 14px;
            background:rgba(233,176,78,1);
            border-radius:2px;
            font-size: 18px;
            color: #fff;
        }
        .label-box {
            display: flex;
            margin-bottom: 12px;
            input{
                flex: 1;
                height: 40px;
                padding: 0 12px;
                font-size: 14px;
                border: 1px solid #E3E3E3;
                border-radius: 2px;
                &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                    color: #C9C9C9;
                }
            }
        }
        .link-box{
            display: flex;
            justify-content: space-between;
            a{
                font-size: 12px;
                color: #666;
            }
        }
    }
    footer {
        padding: 50px 0;
        font-size: 14px;
        color: #666;
        text-align: center;
    }
</style>
